<template>
  <a-dropdown :arrow="true" placement="bottomRight" trigger="click">
    <span style="color: rgba(0, 0, 0, 0.88); cursor: pointer; font-size: 16px">
      <iconfont name="#icon-shezhi" />
    </span>
    <template #overlay>
      <div class="list">
        <div class="head">
          <div class="title" @click.stop>
            <a-checkbox
              v-model:checked="checkAll"
              :indeterminate="indeterminate"
              @change="onCheckAllChange"
            >
              列设置
            </a-checkbox>
          </div>
          <div class="more" @click.stop>
            <a-button
              type="link"
              @click="onRest"
              style="padding: 4px; justify-content: space-between"
            >
              重置
            </a-button>
          </div>
        </div>
        <a-divider />
        <div>
          <container @drop="onDrop" drag-handle-selector=".column-drag-handle">
            <draggable v-for="option in reduced" :key="option.key">
              <div class="item">
                <div
                  class="column-drag-handle"
                  style="padding-right: 16px; cursor: pointer"
                >
                  <holder-outlined />
                </div>
                <div @click.stop @mousedown.stop>
                  <a-checkbox
                    v-model:checked="option.checked"
                    @change="onCheckChange"
                  >
                    {{ option.title }}
                  </a-checkbox>
                </div>
              </div>
            </draggable>
          </container>
        </div>
      </div>
    </template>
  </a-dropdown>
</template>
<script setup>
import { watch, ref } from 'vue'
import { useVModel } from '@vueuse/core'
import { HolderOutlined } from '@ant-design/icons-vue'
import iconfont from '@/components/iconfont.vue'

import { Container, Draggable } from 'vue3-smooth-dnd'
import { applyDrag } from './helpers.js'
/**
 * 定义外部参数
 */
let props = defineProps({
  options: {
    type: Array,
    default() {
      return []
    },
  },
  reduced: {
    type: Array,
    default() {
      return []
    },
  },
})
/**
 * 定义事件
 */
let emit = defineEmits(['update:reduced'])
/**
 * 双向绑定
 */
let reduced = useVModel(props, 'reduced', emit)
/**
 * reduced的操作
 */
//外部变化重新初始化
watch(
  () => props.options,
  options => {
    reduced.value = options.map(item => ({ checked: true, ...item }))
  },
  { immediate: true },
)
//排序
function onDrop(dropResult) {
  reduced.value = applyDrag(reduced.value, dropResult)
}
//选择
let checkAll = ref(true)
let indeterminate = ref(false)
function onCheckAllChange(event) {
  indeterminate.value = false
  if (event.target.checked) {
    reduced.value = reduced.value.map(item => ({ ...item, checked: true }))
  } else {
    reduced.value = reduced.value.map(item => ({ ...item, checked: false }))
  }
}
function onCheckChange() {
  let checkedLength = reduced.value.filter(({ checked }) => checked).length
  indeterminate.value =
    checkedLength > 0 && checkedLength < reduced.value.length
  checkAll.value = checkedLength === reduced.value.length
}
//重置
function onRest() {
  reduced.value = reduced.value.map(item => ({ ...item, checked: true }))
  indeterminate.value = false
  checkAll.value = true
}
</script>
<style lang="less" scoped>
.list {
  padding: 13px;
  list-style-type: none;
  background-color: #ffffff;
  background-clip: padding-box;
  border-radius: 2px;
  outline: none;
  box-shadow:
    0 6px 16px 0 rgba(0, 0, 0, 0.08),
    0 3px 6px -4px rgba(0, 0, 0, 0.12),
    0 9px 28px 8px rgba(0, 0, 0, 0.05);
  max-height: 270px;
  overflow-y: auto;
  .item {
    display: flex;
  }
  .head {
    text-align: center;
    line-height: 32px;
    display: flex;
    justify-content: space-between;
  }
  .ant-divider {
    margin: 5px 0;
  }
}
</style>
